<template>
	<view>
		<view>
			<view class="cu-form-group" style="padding: 0rpx;margin-top: 10rpx;">
				<view class="title" style="font-size: 13px;">联系电话</view>
				<input type="number" maxlength="11" placeholder="联系方式" v-model="mobile"
					style="background-color: aliceblue;height: 80rpx;border-radius: 4px;padding-left: 20upx;background: #F5F5F5;color: black;"></input>
			</view>
			<view class="cu-form-group" style="padding: 0rpx;margin-top: 15rpx;border: 0;">
				<view class="title" style="font-size: 13px;">所属地区</view>
				<input type="text" placeholder="选择区域" @tap="btnClick" :value="addressData.formatted_address"
					style="background-color: aliceblue;height: 80rpx;border-radius: 4px;padding-left: 20upx;background: #F5F5F5;color: black;"
				></input>

			</view>
			<view class="cu-form-group" style="padding: 0rpx;margin-top: -10rpx;border: 0;">
				<view class="title" style="font-size: 13px;">详细地址</view>
				
				
				<textarea maxlength="-1" @input="getInputtips" @focus="focusInputtips" @confirm="confirmInputtips"
					@blur="blurInputtips" :placeholder-style="addressData.adcode==''?'color: #bbb':''"
					:adjust-position="false" :value="addressData.address?(addressData.address_name+addressData.address):''"
					:disabled="addressData.adcode==''?true:false"
					:placeholder="addressData.adcode==''?'还没有选择地区哦~ 选择地区后完成此项':'支持智能联想，输入小区名试试~'" style="background-color: aliceblue;width: 258px;height:150upx;border-radius: 4px;padding: 10upx 20upx;background: #F5F5F5;color: black;"></textarea>
					
			</view>
			
			<scroll-view scroll-y="true" class="tipsScroll" v-show="!addressType">
				<view class="item" v-for="(item,index) in addressList.tips" :key="index" @tap="addressTisp(item)">
					<view>{{item.address}}</view>
					<text>{{item.name}}</text>
				</view>
			</scroll-view>
			
			<view>
				<button class="submitArtison" @click="addTask">{{button_text}}</button>
			</view>
			<view style="height: 50upx;margin-top: 20upx;">
				<checkbox-group :class="checked == 1 ? 'shake-horizontal' : ''" class="auth-clause"
					@change="CheckboxChange">
					<checkbox class="orange" :class="checked == 2 ? 'checked' : ''"
						:checked="checked == 2 ? true : false" value="2" />
					<view style="font-size: 12px;">
					<agreement  ></agreement>
					</view>
				</checkbox-group>
			</view>
			<view style="margin:65upx 5upx;">
				<image :src="flow_chat" style="height: 90upx;" />
			</view>
		</view>
		<wanl-address ref='wanlAddress' @selectAddress="successSelectAddress"></wanl-address>
		<view style="height: 70upx;"></view>
		<view class="detail">
			<view style="width: 100%;">
				<image :src="detail_img" style="width: 100%;height: 1800px;">
			</view>
			<view style="margin-top: 20px;margin-bottom: 30upx;">
				<button class="submitArtison" @click="addTask">{{button_text}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	import graceChecker from '@/common/graceChecker';
	export default {
		name: "jmy-find-artison",
		props: {
			button_text: '',
			flow_chat: '',
			address: '',
			detail_img:'',
			worker_type_id: 0,
			worker_type_child_id: 0,
			worker_id: 0,
			addressType: true
		},
		data() {
			return {
				// detailist:[
				// 	'https://img.aibbyp.com/wechat/images/artison/top_user.png',
				// 	'https://img.aibbyp.com/wechat/images/artison/z1.png',
				// 	'https://img.aibbyp.com/wechat/images/artison/z2.png',
				// 	'https://img.aibbyp.com/wechat/images/artison/z3.png',
				// 	'https://img.aibbyp.com/wechat/images/artison/z4.png',
				// 	'https://img.aibbyp.com/wechat/images/artison/z5.png',
				// 	'https://img.aibbyp.com/wechat/images/artison/z6.png',
				// 	'https://img.aibbyp.com/wechat/images/artison/z7.png',
				// 	'https://img.aibbyp.com/wechat/images/artison/z8.png',
				// ],
				addressData: {
					name: '',
					mobile: '',
					default: 0, //地区
					country: '', // 国家
					province: '', //省份
					city: '', // 城市
					citycode: '', // 城市代码
					district: '', // 县
					adcode: '', // 地区代码
					formatted_address: '', //详细地区
					//详情
					address: '', //详细地址
					address_name: '', // 地址名称
					location: '' //经纬度
				},
				addressList: {
					location: '',
					adcode: '',
					tips: {}
				},
				checked: 0,
				mobile: ''
			};
		},
		methods: {
			btnClick() {
				this.$refs.wanlAddress.show();
			},
			successSelectAddress(address) {
				this.addressData.formatted_address = address.formatted_address;
				this.addressData.country = address.country;
				this.addressData.province = address.province;
				this.addressData.city = address.city;
				this.addressData.citycode = address.citycode;
				this.addressData.district = address.district;
				// this.addressData.formatted_address = address.formatted_address
				this.addressData.location = address.location;
				this.addressData.adcode = address.adcode;
				this.addressList.location = address.location;
				this.addressList.adcode = address.adcode;
					console.log(address)
				},
				//调用高德地图搜索相关地址
				getInputtips(event) {
					let keywords = event.detail.value;
					if (keywords) {
						uni.request({
							url: 'https://restapi.amap.com/v3/assistant/inputtips',
							data: {
								key: this.$wanlshop.config('amapkey'),
								keywords: keywords,
								location: this.addressList.location,
								city: this.addressList.adcode
							},
							success: (res) => {
								let addressList = [];
								if (res.data.status == 0) {
									this.addressList.tips = addressList;
									return
								}
								res.data.tips.forEach(item => {
									if (item.address.length == 0) {
										item.address = '暂未收录地址';
										item.location = '113.294701,22.666562';
									}
									addressList.push(item);
								});
								this.addressList.tips = addressList;
							}
						});
					}
				},
				// 详细地址失去焦点
				blurInputtips(event) {
					this.addressData.address = event.detail.value;
					setTimeout(() => {
						this.addressType = true;
					}, 10);
				},
				// 详细地址已完成
				confirmInputtips(event) {
					this.addressType = true;
				},
				// 详细地址获取焦点
				focusInputtips(event) {
					this.addressType = false;
				},
				// 详细地址替换
				addressTisp(data) {
					this.addressData.adcode = data.adcode;
					this.addressData.address = data.address;
					this.addressData.address_name = data.name;
					this.addressData.location = data.location;
					this.addressType = true;
				},
			CheckboxChange(e) {
				this.checked = e.detail.value;
			},
			addTask() {
				let area = this.addressData.formatted_address;
				let address = this.addressData.address;
				let readAgreement = this.checked[0];
				if (readAgreement != 2) {
					this.$wanlshop.msg("是否阅读并且同意《好饰商家版用户协议》和《好饰商家版隐私政策》")
					return
				}
				this.$api.post({
					url: '/jmy/worker_type/addTask',
					data: {
						worker_type_id: this.worker_type_id,
						worker_type_child_id: this.worker_type_child_id,
						area: area,
						address: address,
						mobile: this.mobile,
						worker_id: this.worker_id
					},
					success: (res) => {
						this.$wanlshop.to('/pages/call/success/success?item=预约完成&title=预约')
					},
					fail:res =>{
						console.log(res,'-->')
					}
				});
			},

		}
	}
</script>

<style>
	@import url("../../pages/user/auth/auth.css");

	page {
		background-color: #F7F7F7;
	}

	.submitArtison {
		color: #FFFFFF;
		height: 46px;
		border-radius: 30px;
		opacity: 1;
		background: linear-gradient(179deg, #FFC262 -8%, #FD6B2A 78%);
		box-sizing: border-box;
		border-image: linear-gradient(180deg, #FF9F00 0%, #F95B2A 100%) 2;
		font-family: Source Han Sans;
	}


	.detail {
		margin: -61rpx;
		padding: 3%;
		background-color: #FFFFFF;
		border-radius: 10px;

	}
</style>